<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新书</title>
    <link rel="stylesheet" href="css/style2.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/amazeui.min.js"></script>
    <link rel="stylesheet" href="css/amazeui.min.css">
    <script>
        var iScale = 1;
        iScale = iScale / window.devicePixelRatio;
        document.write('<meta name="viewport" content="width=device-width,user-scalable=no,' +
                'initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">');
    </script>
    <style>
        body{background: #ececec  }
        .list{width: 16rem; overflow: hidden;margin-bottom: .25rem}
        .list ul {padding: 0;margin: 0;}
        .list ul li{background: white;padding-left: .5rem;font-size: .75rem;line-height: 2rem;width: 16rem;height: 2rem;background: white;}
        .list ul li span{font-size: .65rem;color: gray}
        .list ul li:nth-child(even){border-top:1px solid #dcdcdc ;float: left}
        .list ul li:nth-child(odd){border-top:1px solid #dcdcdc;border-right:1px solid #dcdcdc;float: left}
        .list ul li:nth-last-child(1) {  border-bottom: 1px solid #dcdcdc;  }
        .list ul li:nth-last-child(2) {  border-bottom: 1px solid #dcdcdc;  }
    </style>
</head>
<body>
<div class="am-slider am-slider-default" data-am-flexslider="{playAfterPaused: 8000}" style="position: relative;">
    <ul class="am-slides">
        <li style="width: 16rem;height: 10rem"><img src="img/333.png" alt=""></li>
        <li style="width: 16rem;height: 10rem"><img src="img/333.png" alt=""></li>
        <li style="width: 16rem;height: 10rem"><img src="img/333.png" alt=""></li>
    </ul>
    <div class="cate-search" style="background: none;position: absolute">
        <input type="text" class="cate-input" style="background: #6b6b5e;opacity: 0.6;border-radius: 55px;height: 1.8rem;color: white" placeholder="书名/作者/关键词" />
        <input type="button" class="cate-btn" />
    </div>
</div>
<!--头部结束-->
<div class="list">
    <p>管理类</p>
    <ul style="height:100%">
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
        <li>安徒生童话</li>
    </ul>
</div>

<div style="height: 2rem"></div>
<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default sq-foot am-no-layout" id="">
    <ul class="am-navbar-nav am-cf am-avg-sm-4">
        <li>
            <a href="新书.html" class="curr">
                <span><img src="img/q1.png"/></span>
            </a>
        </li>
        <li>
            <a href="阅读足迹.html" class="">
                <span><img src="img/w1.png"/></span>
            </a>
        </li>
        <li>
            <a href="#" class="">
                <span><img src="img/e2.png"/></span>
            </a>
        </li>
    </ul>
</div>

</body>
<script>
    $(function(){
        //动态更新fontsize
        var width = $(document).width();
        var size = width/16;
        console.log(size);
        $('html').css('fontSize',size+'px');

    })

</script>
</html>